/*=========================== 01.COMMON css ===========================*/ @font-face { font-family: "Gotham-Black"; src: url("../fonts/Gotham-Black.otf"); } @font-face { font-family: "GothamBold"; src: url("../fonts/GothamBold.ttf"); } @font-face { font-family: "GothamBoldItalic"; src: url("../fonts/GothamBoldItalic.ttf"); } @font-face { font-family: "GothamMedium_1"; src: url("../fonts/GothamMedium_1.ttf"); } @font-face { font-family: "Gotham-Light"; src: url("../fonts/Gotham-Light.otf"); } @font-face { font-family: "Arial"; src: url("../fonts/Arial.ttf"); } @font-face { font-family: "AvenirNext"; src: url("../fonts/AvenirNext.ttc"); } @font-face { font-family: "Rubik-Black"; src: url("../fonts/Rubik-Black.ttf"); } @font-face { font-family: "Rubik-Bold"; src: url("../fonts/Rubik-Bold.ttf"); } body { font-family: "Gotham-Light"; font-weight: normal; font-style: normal; color: #242b57ff; } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img { max-width: 100%; } a:focus, input:focus, textarea:focus, button:focus { text-decoration: none; outline: none; } a:focus, a:hover { text-decoration: none; } i, span, a { display: inline-block; } h1, h2, h3, h4, h5, h6 { font-family: "Gotham-Light"; font-weight: 600; color: #242b57ff; margin: 0px; } h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 28px; } h4 { font-size: 22px; } h5 { font-size: 18px; } h6 { font-size: 16px; } ul, ol { margin: 0px; padding: 0px; list-style-type: none; } p { font-size: 16px; font-weight: 400; line-height: 24px; color: #242b57ff; margin: 0px; } .bg_cover { background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; } /*===== All Slick Slide Outline Style =====*/ .slick-slide { outline: 0; } /*===== All Section Title Style =====*/ .section-title .title { font-size: 44px; font-weight: 600; color: #242b57ff; line-height: 55px; } @media only screen and (max-width: 767px) { .navbar-brand { width: 100% !important; } .opcion-pago-2 ul { margin-top: 100px !important; } .slider-content { padding-top: 10px !important; } .opcion-pago-2 img { max-width: 100px !important; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-brand { width: auto; } .opcion-pago-2 ul { margin-top: 100px !important; } .slider-content { padding-top: 10px !important; } } @media (max-width: 767px) { .section-title .title { font-size: 30px; line-height: 35px; } } .section-title .text { font-size: 16px; line-height: 24px; color: #6c6c6c; margin-top: 24px; } /*===== All Preloader Style =====*/ .preloader { /* Body Overlay */ position: fixed; top: 0; left: 0; display: table; height: 100%; width: 100%; /* Change Background Color */ background: #fff; z-index: 99999; } .preloader .loader { display: table-cell; vertical-align: middle; text-align: center; } .preloader .loader .ytp-spinner { position: absolute; left: 50%; top: 50%; width: 64px; margin-left: -32px; z-index: 18; pointer-events: none; } .preloader .loader .ytp-spinner .ytp-spinner-container { pointer-events: none; position: absolute; width: 100%; padding-bottom: 100%; top: 50%; left: 50%; margin-top: -50%; margin-left: -50%; -webkit-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; -moz-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; -o-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; animation: ytp-spinner-linspin 1568.23529647ms linear infinite; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator { position: absolute; width: 100%; height: 100%; -webkit-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -moz-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -o-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-left { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; right: 50%; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-right { position: absolute; top: 0; right: 0; bottom: 0; overflow: hidden; left: 50%; } .preloader .loader .ytp-spinner-circle { box-sizing: border-box; position: absolute; width: 200%; height: 100%; border-style: solid; /* Spinner Color */ border-color: #3b9fdcff #3b9fdcff #e9ecef; border-radius: 50%; border-width: 6px; } .preloader .loader .ytp-spinner-left .ytp-spinner-circle { left: 0; right: -100%; border-right-color: #e9ecef; -webkit-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -moz-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -o-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .preloader .loader .ytp-spinner-right .ytp-spinner-circle { left: -100%; right: 0; border-left-color: #e9ecef; -webkit-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -moz-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -o-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } /* Preloader Animations */ @-webkit-keyframes ytp-spinner-linspin { to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes ytp-spinner-linspin { to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes ytp-spinner-easespin { 12.5% { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); -moz-transform: rotate(405deg); -ms-transform: rotate(405deg); -o-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); -moz-transform: rotate(540deg); -ms-transform: rotate(540deg); -o-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); -moz-transform: rotate(675deg); -ms-transform: rotate(675deg); -o-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); -moz-transform: rotate(810deg); -ms-transform: rotate(810deg); -o-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); -moz-transform: rotate(945deg); -ms-transform: rotate(945deg); -o-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); -moz-transform: rotate(1080deg); -ms-transform: rotate(1080deg); -o-transform: rotate(1080deg); transform: rotate(1080deg); } } @keyframes ytp-spinner-easespin { 12.5% { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); -moz-transform: rotate(405deg); -ms-transform: rotate(405deg); -o-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); -moz-transform: rotate(540deg); -ms-transform: rotate(540deg); -o-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); -moz-transform: rotate(675deg); -ms-transform: rotate(675deg); -o-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); -moz-transform: rotate(810deg); -ms-transform: rotate(810deg); -o-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); -moz-transform: rotate(945deg); -ms-transform: rotate(945deg); -o-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); -moz-transform: rotate(1080deg); -ms-transform: rotate(1080deg); -o-transform: rotate(1080deg); transform: rotate(1080deg); } } @-webkit-keyframes ytp-spinner-left-spin { 0% { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } } @keyframes ytp-spinner-left-spin { 0% { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } } @-webkit-keyframes ytp-right-spin { 0% { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } } @keyframes ytp-right-spin { 0% { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } } /*=========================== 11.BUTTON css ===========================*/ .buttons-title .title { font-size: 36px; line-height: 45px; color: #6c6c6c; } @media (max-width: 767px) { .buttons-title .title { font-size: 24px; line-height: 35px; } } .main-btn { display: inline-block; font-weight: 700; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 2px solid transparent; padding: 0 32px; font-size: 16px; line-height: 46px; color: #3b9fdcff; cursor: pointer; z-index: 5; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; position: relative; text-transform: uppercase; } @media (max-width: 767px) { .main-btn { font-size: 14px; padding: 0 20px; line-height: 40px; } } /*===== standard Buttons =====*/ .standard-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .standard-buttons ul li { margin-left: 0; } } .standard-buttons ul li:first-child { margin-left: 0; } .standard-buttons .standard-one { border-color: #3b9fdcff; } .standard-buttons .standard-one:hover { color: #3b9fdcff; background-color: rgba(0, 103, 244, 0.4); } .standard-buttons .standard-two { color: #fff; background-color: #3b9fdcff; border-color: #3b9fdcff; } .standard-buttons .standard-two:hover { color: #3b9fdcff; background-color: transparent; } .standard-buttons .standard-three { overflow: hidden; line-height: 50px; color: #fff; background: -webkit-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: -o-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: linear-gradient( to right, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); border: 0; line-height: 52px; background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .standard-buttons .standard-three { line-height: 44px; } } @media (max-width: 767px) { .standard-buttons .standard-three { line-height: 44px; } } .standard-buttons .standard-three:hover { background-position: right center; } .standard-buttons .standard-four { border-color: #3b9fdcff; padding-left: 60px; } @media (max-width: 767px) { .standard-buttons .standard-four { padding-left: 40px; } } .standard-buttons .standard-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .standard-buttons .standard-four span { left: 15px; } } .standard-buttons .standard-four:hover { color: #3b9fdcff; background-color: rgba(0, 103, 244, 0.4); } .standard-buttons .standard-four:hover i { animation: iconTranslateY 0.5s forwards; } .standard-buttons .standard-five { color: #fff; background-color: #3b9fdcff; border-color: #3b9fdcff; padding-left: 60px; } @media (max-width: 767px) { .standard-buttons .standard-five { padding-left: 40px; } } .standard-buttons .standard-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .standard-buttons .standard-five span { left: 15px; } } .standard-buttons .standard-five:hover { color: #3b9fdcff; background-color: transparent; } .standard-buttons .standard-five:hover i { animation: iconTranslateY 0.5s forwards; } .standard-buttons .standard-six { padding-right: 60px; overflow: hidden; line-height: 50px; color: #fff; background: -webkit-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: -o-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: linear-gradient( to right, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); border: 0; line-height: 52px; background-size: 200% auto; } @media (max-width: 767px) { .standard-buttons .standard-six { padding-right: 40px; line-height: 44px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .standard-buttons .standard-six { line-height: 44px; } } .standard-buttons .standard-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .standard-buttons .standard-six span { right: 15px; } } .standard-buttons .standard-six:hover { background-position: right center; } .standard-buttons .standard-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Light Rounded Buttons =====*/ .light-rounded-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .light-rounded-buttons ul li { margin-left: 0; } } .light-rounded-buttons ul li:first-child { margin-left: 0; } .light-rounded-buttons .main-btn { border-radius: 5px; } .light-rounded-buttons .light-rounded-one { border-color: #3b9fdcff; } .light-rounded-buttons .light-rounded-one:hover { color: #3b9fdcff; background-color: rgba(0, 103, 244, 0.4); } .light-rounded-buttons .light-rounded-two { color: #fff; background-color: #3b9fdcff; border-color: #3b9fdcff; } .light-rounded-buttons .light-rounded-two:hover { color: #3b9fdcff; background-color: transparent; } .light-rounded-buttons .light-rounded-three { overflow: hidden; line-height: 50px; color: #fff; background: -webkit-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: -o-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: linear-gradient( to right, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background-size: 200% auto; line-height: 52px; border: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .light-rounded-buttons .light-rounded-three { line-height: 44px; } } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-three { line-height: 44px; } } .light-rounded-buttons .light-rounded-three:hover { background-position: right center; } .light-rounded-buttons .light-rounded-four { border-color: #3b9fdcff; padding-left: 60px; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-four { padding-left: 40px; } } .light-rounded-buttons .light-rounded-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-four span { left: 15px; } } .light-rounded-buttons .light-rounded-four:hover { color: #3b9fdcff; background-color: rgba(0, 103, 244, 0.4); } .light-rounded-buttons .light-rounded-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .light-rounded-buttons .light-rounded-five { color: #fff; background-color: #3b9fdcff; border-color: #3b9fdcff; padding-left: 60px; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-five { padding-left: 40px; } } .light-rounded-buttons .light-rounded-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-five span { left: 15px; } } .light-rounded-buttons .light-rounded-five:hover { color: #3b9fdcff; background-color: transparent; } .light-rounded-buttons .light-rounded-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .light-rounded-buttons .light-rounded-six { padding-right: 60px; overflow: hidden; line-height: 50px; color: #fff; background: -webkit-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: -o-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: linear-gradient( to right, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background-size: 200% auto; line-height: 52px; border: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .light-rounded-buttons .light-rounded-six { line-height: 44px; } } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-six { padding-right: 40px; line-height: 44px; } } .light-rounded-buttons .light-rounded-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .light-rounded-buttons .light-rounded-six span { right: 15px; } } .light-rounded-buttons .light-rounded-six:hover { background-position: right center; } .light-rounded-buttons .light-rounded-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Semi Rounded Buttons =====*/ .semi-rounded-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .semi-rounded-buttons ul li { margin-left: 0; } } .semi-rounded-buttons ul li:first-child { margin-left: 0; } .semi-rounded-buttons .main-btn { border-radius: 10px; } .semi-rounded-buttons .semi-rounded-one { border-color: #3b9fdcff; } .semi-rounded-buttons .semi-rounded-one:hover { color: #3b9fdcff; background-color: rgba(0, 103, 244, 0.4); } .semi-rounded-buttons .semi-rounded-two { color: #fff; background-color: #3b9fdcff; border-color: #3b9fdcff; } .semi-rounded-buttons .semi-rounded-two:hover { color: #3b9fdcff; background-color: transparent; } .semi-rounded-buttons .semi-rounded-three { overflow: hidden; line-height: 52px; background: -webkit-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: -o-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: linear-gradient( to right, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background-size: 200% auto; border: 0; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .semi-rounded-buttons .semi-rounded-three { line-height: 44px; } } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-three { line-height: 44px; } } .semi-rounded-buttons .semi-rounded-three:hover { background-position: right center; } .semi-rounded-buttons .semi-rounded-four { border-color: #3b9fdcff; padding-left: 60px; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-four { padding-left: 40px; } } .semi-rounded-buttons .semi-rounded-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-four span { left: 15px; } } .semi-rounded-buttons .semi-rounded-four:hover { color: #3b9fdcff; background-color: rgba(0, 103, 244, 0.4); } .semi-rounded-buttons .semi-rounded-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .semi-rounded-buttons .semi-rounded-five { color: #fff; background-color: #3b9fdcff; border-color: #3b9fdcff; padding-left: 60px; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-five { padding-left: 40px; } } .semi-rounded-buttons .semi-rounded-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-five span { left: 15px; } } .semi-rounded-buttons .semi-rounded-five:hover { color: #3b9fdcff; background-color: transparent; } .semi-rounded-buttons .semi-rounded-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .semi-rounded-buttons .semi-rounded-six { padding-right: 60px; overflow: hidden; line-height: 52px; background: -webkit-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: -o-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: linear-gradient( to right, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background-size: 200% auto; border: 0; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .semi-rounded-buttons .semi-rounded-six { line-height: 44px; } } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-six { padding-right: 40px; line-height: 44px; } } .semi-rounded-buttons .semi-rounded-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .semi-rounded-buttons .semi-rounded-six span { right: 15px; } } .semi-rounded-buttons .semi-rounded-six:hover { background-position: right center; } .semi-rounded-buttons .semi-rounded-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Rounded Buttons =====*/ .rounded-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .rounded-buttons ul li { margin-left: 0; } } .rounded-buttons ul li:first-child { margin-left: 0; } .rounded-buttons .main-btn { border-radius: 9px; } .rounded-buttons .rounded-one { border-color: #3b9fdcff; } .rounded-buttons .rounded-one:hover { color: #3b9fdcff; background-color: rgba(0, 103, 244, 0.4); } .rounded-buttons .rounded-two { color: #fff; background-color: #3b9fdcff; color: #3b9fdcff; /*GTJ*/ background-color: #fff; /*GTJ*/ border-color: #3b9fdcff !important; } .rounded-buttons .rounded-two:hover { color: #3b9fdcff; background-color: transparent; } .rounded-buttons .rounded-three { overflow: hidden; line-height: 52px; background: -webkit-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: -o-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: linear-gradient( to right, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background-size: 200% auto; color: #fff; border: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .rounded-buttons .rounded-three { line-height: 44px; } } @media (max-width: 767px) { .rounded-buttons .rounded-three { line-height: 44px; } } .rounded-buttons .rounded-three:hover { background-position: right center; } .rounded-buttons .rounded-four { border-color: #3b9fdcff; padding-left: 60px; } @media (max-width: 767px) { .rounded-buttons .rounded-four { padding-left: 40px; } } .rounded-buttons .rounded-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .rounded-buttons .rounded-four span { left: 15px; } } .rounded-buttons .rounded-four:hover { color: #3b9fdcff; background-color: rgba(0, 103, 244, 0.4); } .rounded-buttons .rounded-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .rounded-buttons .rounded-five { color: #fff; background-color: #3b9fdcff; border-color: #3b9fdcff; padding-left: 60px; } @media (max-width: 767px) { .rounded-buttons .rounded-five { padding-left: 40px; } } .rounded-buttons .rounded-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .rounded-buttons .rounded-five span { left: 15px; } } .rounded-buttons .rounded-five:hover { color: #3b9fdcff; background-color: transparent; } .rounded-buttons .rounded-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .rounded-buttons .rounded-six { padding-right: 60px; overflow: hidden; line-height: 52px; background: -webkit-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: -o-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: linear-gradient( to right, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background-size: 200% auto; color: #fff; border: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .rounded-buttons .rounded-six { line-height: 44px; } } @media (max-width: 767px) { .rounded-buttons .rounded-six { padding-right: 40px; line-height: 44px; } } .rounded-buttons .rounded-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .rounded-buttons .rounded-six span { right: 15px; } } .rounded-buttons .rounded-six:hover { background-position: right center; } .rounded-buttons .rounded-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Success Buttons =====*/ .success-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .success-buttons ul li { margin-left: 0; } } .success-buttons ul li:first-child { margin-left: 0; } .success-buttons .success-one { border-color: #4da422; color: #4da422; } .success-buttons .success-one:hover { color: #4da422; background-color: rgba(77, 164, 34, 0.4); } .success-buttons .success-two { color: #fff; background-color: #4da422; border-color: #4da422; } .success-buttons .success-two:hover { color: #4da422; background-color: transparent; } .success-buttons .success-three { overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient( left, #4da422 0%, #69e02e 50%, #4da422 100% ); background: -o-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%); background: linear-gradient(to right, #4da422 0%, #69e02e 50%, #4da422 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .success-buttons .success-three { line-height: 44px; } } @media (max-width: 767px) { .success-buttons .success-three { line-height: 44px; } } .success-buttons .success-three:hover { background-position: right center; } .success-buttons .success-four { padding-left: 60px; border-color: #4da422; color: #4da422; } @media (max-width: 767px) { .success-buttons .success-four { padding-left: 40px; } } .success-buttons .success-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .success-buttons .success-four span { left: 15px; } } .success-buttons .success-four:hover { color: #4da422; background-color: rgba(77, 164, 34, 0.4); } .success-buttons .success-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .success-buttons .success-five { padding-left: 60px; color: #fff; background-color: #4da422; border-color: #4da422; } @media (max-width: 767px) { .success-buttons .success-five { padding-left: 40px; } } .success-buttons .success-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .success-buttons .success-five span { left: 15px; } } .success-buttons .success-five:hover { color: #4da422; background-color: transparent; } .success-buttons .success-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .success-buttons .success-six { padding-right: 60px; overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient( left, #4da422 0%, #69e02e 50%, #4da422 100% ); background: -o-linear-gradient(left, #4da422 0%, #69e02e 50%, #4da422 100%); background: linear-gradient(to right, #4da422 0%, #69e02e 50%, #4da422 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .success-buttons .success-six { line-height: 44px; } } @media (max-width: 767px) { .success-buttons .success-six { padding-right: 40px; line-height: 44px; } } .success-buttons .success-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .success-buttons .success-six span { right: 15px; } } .success-buttons .success-six:hover { background-position: right center; } .success-buttons .success-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Warning Buttons =====*/ .warning-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .warning-buttons ul li { margin-left: 0; } } .warning-buttons ul li:first-child { margin-left: 0; } .warning-buttons .warning-one { border-color: #ffb400; color: #ffb400; } .warning-buttons .warning-one:hover { color: #ffb400; background-color: rgba(255, 180, 0, 0.4); } .warning-buttons .warning-two { color: #fff; background-color: #ffb400; border-color: #ffb400; } @media only screen and (min-width: 768px) and (max-width: 991px) { .warning-buttons .warning-two { line-height: 44px; } } @media (max-width: 767px) { .warning-buttons .warning-two { padding-right: 40px; line-height: 44px; } } .warning-buttons .warning-two:hover { color: #ffb400; background-color: transparent; } .warning-buttons .warning-three { overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient( left, #ffb400 0%, #f7e500 50%, #ffb400 100% ); background: -o-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%); background: linear-gradient(to right, #ffb400 0%, #f7e500 50%, #ffb400 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .warning-buttons .warning-three { line-height: 44px; } } @media (max-width: 767px) { .warning-buttons .warning-three { line-height: 44px; } } .warning-buttons .warning-three:hover { background-position: right center; } .warning-buttons .warning-four { padding-left: 60px; border-color: #ffb400; color: #ffb400; } @media (max-width: 767px) { .warning-buttons .warning-four { padding-left: 40px; } } .warning-buttons .warning-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .warning-buttons .warning-four span { left: 15px; } } .warning-buttons .warning-four:hover { color: #ffb400; background-color: rgba(255, 180, 0, 0.4); } .warning-buttons .warning-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .warning-buttons .warning-five { padding-left: 60px; color: #fff; background-color: #ffb400; border-color: #ffb400; } @media (max-width: 767px) { .warning-buttons .warning-five { padding-left: 40px; } } .warning-buttons .warning-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .warning-buttons .warning-five span { left: 15px; } } .warning-buttons .warning-five:hover { color: #ffb400; background-color: transparent; } .warning-buttons .warning-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .warning-buttons .warning-six { padding-right: 60px; overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient( left, #ffb400 0%, #f7e500 50%, #ffb400 100% ); background: -o-linear-gradient(left, #ffb400 0%, #f7e500 50%, #ffb400 100%); background: linear-gradient(to right, #ffb400 0%, #f7e500 50%, #ffb400 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .warning-buttons .warning-six { line-height: 44px; } } @media (max-width: 767px) { .warning-buttons .warning-six { padding-right: 40px; line-height: 44px; } } .warning-buttons .warning-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .warning-buttons .warning-six span { right: 15px; } } .warning-buttons .warning-six:hover { background-position: right center; } .warning-buttons .warning-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Info Buttons =====*/ .info-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .info-buttons ul li { margin-left: 0; } } .info-buttons ul li:first-child { margin-left: 0; } .info-buttons .info-one { border-color: #00b8d8; color: #00b8d8; } .info-buttons .info-one:hover { color: #00b8d8; background-color: rgba(0, 184, 216, 0.4); } .info-buttons .info-two { color: #fff; background-color: #00b8d8; border-color: #00b8d8; } .info-buttons .info-two:hover { color: #00b8d8; background-color: transparent; } .info-buttons .info-three { overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient( left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100% ); background: -o-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background: linear-gradient(to right, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .info-buttons .info-three { line-height: 44px; } } @media (max-width: 767px) { .info-buttons .info-three { line-height: 44px; } } .info-buttons .info-three:hover { background-position: right center; } .info-buttons .info-four { padding-left: 60px; border-color: #00b8d8; color: #00b8d8; } @media (max-width: 767px) { .info-buttons .info-four { padding-left: 40px; } } .info-buttons .info-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .info-buttons .info-four span { left: 15px; } } .info-buttons .info-four:hover { color: #00b8d8; background-color: rgba(0, 184, 216, 0.4); } .info-buttons .info-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .info-buttons .info-five { padding-left: 60px; color: #fff; background-color: #00b8d8; border-color: #00b8d8; } @media (max-width: 767px) { .info-buttons .info-five { padding-left: 40px; } } .info-buttons .info-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .info-buttons .info-five span { left: 15px; } } .info-buttons .info-five:hover { color: #00b8d8; background-color: transparent; } .info-buttons .info-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .info-buttons .info-six { padding-right: 60px; overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient( left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100% ); background: -o-linear-gradient(left, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background: linear-gradient(to right, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .info-buttons .info-six { line-height: 44px; } } @media (max-width: 767px) { .info-buttons .info-six { padding-right: 40px; line-height: 44px; } } .info-buttons .info-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .info-buttons .info-six span { right: 15px; } } .info-buttons .info-six:hover { background-position: right center; } .info-buttons .info-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } /*===== Danger Buttons =====*/ .danger-buttons ul li { display: inline-block; margin-left: 18px; margin-top: 20px; } @media (max-width: 767px) { .danger-buttons ul li { margin-left: 0; } } .danger-buttons ul li:first-child { margin-left: 0; } .danger-buttons .danger-one { border-color: #fc3832; color: #fc3832; } .danger-buttons .danger-one:hover { color: #fc3832; background-color: rgba(252, 56, 50, 0.4); } .danger-buttons .danger-two { color: #fff; background-color: #fc3832; border-color: #fc3832; } .danger-buttons .danger-two:hover { color: #fc3832; background-color: transparent; } .danger-buttons .danger-three { overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient( left, #fc3832 0%, #dc312b 50%, #fc3832 100% ); background: -o-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%); background: linear-gradient(to right, #fc3832 0%, #dc312b 50%, #fc3832 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .danger-buttons .danger-three { line-height: 44px; } } @media (max-width: 767px) { .danger-buttons .danger-three { line-height: 44px; } } .danger-buttons .danger-three:hover { background-position: right center; } .danger-buttons .danger-four { padding-left: 60px; border-color: #fc3832; color: #fc3832; } @media (max-width: 767px) { .danger-buttons .danger-four { padding-left: 40px; } } .danger-buttons .danger-four span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .danger-buttons .danger-four span { left: 15px; } } .danger-buttons .danger-four:hover { color: #fc3832; background-color: rgba(252, 56, 50, 0.4); } .danger-buttons .danger-four:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .danger-buttons .danger-five { padding-left: 60px; color: #fff; background-color: #fc3832; border-color: #fc3832; } @media (max-width: 767px) { .danger-buttons .danger-five { padding-left: 40px; } } .danger-buttons .danger-five span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; left: 30px; line-height: normal; } @media (max-width: 767px) { .danger-buttons .danger-five span { left: 15px; } } .danger-buttons .danger-five:hover { color: #fc3832; background-color: transparent; } .danger-buttons .danger-five:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } .danger-buttons .danger-six { padding-right: 60px; overflow: hidden; line-height: 52px; color: #fff; border: 0; background: -webkit-linear-gradient( left, #fc3832 0%, #dc312b 50%, #fc3832 100% ); background: -o-linear-gradient(left, #fc3832 0%, #dc312b 50%, #fc3832 100%); background: linear-gradient(to right, #fc3832 0%, #dc312b 50%, #fc3832 100%); background-size: 200% auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .danger-buttons .danger-six { line-height: 44px; } } @media (max-width: 767px) { .danger-buttons .danger-six { padding-right: 40px; line-height: 44px; } } .danger-buttons .danger-six span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; right: 30px; line-height: normal; } @media (max-width: 767px) { .danger-buttons .danger-six span { right: 15px; } } .danger-buttons .danger-six:hover { background-position: right center; } .danger-buttons .danger-six:hover i { -webkit-animation: iconTranslateY 0.5s forwards; -moz-animation: iconTranslateY 0.5s forwards; -o-animation: iconTranslateY 0.5s forwards; animation: iconTranslateY 0.5s forwards; } @-webkit-keyframes iconTranslateY { 49% { -webkit-transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); } 51% { opacity: 1; } } @-moz-keyframes iconTranslateY { 49% { -webkit-transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); } 51% { opacity: 1; } } @keyframes iconTranslateY { 49% { -webkit-transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); } 51% { opacity: 1; } } .lg-btn { line-height: 64px !important; font-size: 18px; } @media (max-width: 767px) { .lg-btn { font-size: 16px; ine-height: 52px; } } .el-btn { line-height: 80px !important; font-size: 20px; } @media (max-width: 767px) { .el-btn { font-size: 18px; line-height: 74px; } } .sm-btn { line-height: 40px !important; font-size: 12px; } /*===== Regular Icon Buttons =====*/ .regular-icon-buttons ul li { display: inline-block; margin-left: 10px; margin-top: 20px; } .regular-icon-buttons ul li:first-child { margin-left: 0; } .regular-icon-buttons ul li .regular-icon-light-one { width: 40px; height: 40px; line-height: 36px; border: 2px solid #3b9fdcff; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #3b9fdcff; } .regular-icon-buttons ul li .regular-icon-light-one:hover { color: #fff; background-color: #3b9fdcff; } .regular-icon-buttons ul li .regular-icon-light-two { width: 40px; height: 40px; line-height: 36px; border: 2px solid #3b9fdcff; text-align: center; font-size: 24px; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #3b9fdcff; } .regular-icon-buttons ul li .regular-icon-light-two:hover { color: #fff; background-color: #3b9fdcff; } .regular-icon-buttons ul li .regular-icon-light-three { width: 40px; height: 40px; line-height: 36px; border: 2px solid #3b9fdcff; text-align: center; font-size: 24px; border-radius: 10px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #3b9fdcff; } .regular-icon-buttons ul li .regular-icon-light-three:hover { color: #fff; background-color: #3b9fdcff; } .regular-icon-buttons ul li .regular-icon-light-four { width: 40px; height: 40px; line-height: 36px; border: 2px solid #3b9fdcff; text-align: center; font-size: 24px; border-radius: 50%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; } .regular-icon-buttons ul li .regular-icon-light-four:hover { color: #fff; background-color: #3b9fdcff; } .regular-icon-buttons ul li .regular-icon-light-five { width: 40px; height: 40px; line-height: 40px; border: 0; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; overflow: hidden; color: #fff; background: -webkit-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: -o-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: linear-gradient( to right, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background-size: 200% auto; } .regular-icon-buttons ul li .regular-icon-light-five:hover { background-position: right center; } .regular-icon-buttons ul li .regular-icon-light-six { width: 40px; height: 40px; line-height: 40px; border: 0; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; overflow: hidden; color: #fff; background: -webkit-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: -o-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: linear-gradient( to right, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background-size: 200% auto; border-radius: 5px; } .regular-icon-buttons ul li .regular-icon-light-six:hover { background-position: right center; } .regular-icon-buttons ul li .regular-icon-light-seven { width: 40px; height: 40px; line-height: 40px; border: 0; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; overflow: hidden; color: #fff; background: -webkit-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: -o-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: linear-gradient( to right, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background-size: 200% auto; border-radius: 10px; } .regular-icon-buttons ul li .regular-icon-light-seven:hover { background-position: right center; } .regular-icon-buttons ul li .regular-icon-light-eight { width: 40px; height: 40px; line-height: 40px; border: 0; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; z-index: 5; overflow: hidden; color: #fff; background: -webkit-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: -o-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: linear-gradient( to right, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background-size: 200% auto; border-radius: 50%; } .regular-icon-buttons ul li .regular-icon-light-eight:hover { background-position: right center; } .regular-icon-buttons ul li .regular-icon-light-nine { width: 40px; height: 40px; line-height: 36px; border: 2px solid #3b9fdcff; text-align: center; font-size: 24px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; background-color: #3b9fdcff; } .regular-icon-buttons ul li .regular-icon-light-nine:hover { color: #3b9fdcff; background-color: transparent; } .regular-icon-buttons ul li .regular-icon-light-ten { width: 40px; height: 40px; line-height: 36px; border: 2px solid #3b9fdcff; text-align: center; font-size: 24px; border-radius: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; background-color: #3b9fdcff; } .regular-icon-buttons ul li .regular-icon-light-ten:hover { color: #3b9fdcff; background-color: transparent; } .regular-icon-buttons ul li .regular-icon-light-eleven { width: 40px; height: 40px; line-height: 36px; border: 2px solid #3b9fdcff; text-align: center; font-size: 24px; border-radius: 10px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; background-color: #3b9fdcff; } .regular-icon-buttons ul li .regular-icon-light-eleven:hover { color: #3b9fdcff; background-color: transparent; } .regular-icon-buttons ul li .regular-icon-light-twelve { width: 40px; height: 40px; line-height: 36px; border: 2px solid #3b9fdcff; text-align: center; font-size: 24px; border-radius: 50%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; background-color: #3b9fdcff; } .regular-icon-buttons ul li .regular-icon-light-twelve:hover { color: #3b9fdcff; background-color: transparent; } /*===== Group Buttons =====*/ .group-buttons .btn-group { margin-left: 30px; } .group-buttons .group-one { margin-left: 0; } .group-buttons .group-one .main-btn { background: none; border: 2px solid #3b9fdcff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .group-buttons .group-one .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-one .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-one .main-btn:hover { background-color: #3b9fdcff; color: #fff; } .group-buttons .group-two .main-btn { background: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; line-height: 52px; background: -webkit-linear-gradient( #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: -o-linear-gradient(#3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100%); background: linear-gradient(#3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100%); background-size: auto 200%; border-top: 0; border-bottom: 0; border-color: rgba(244, 246, 247, 0.2); } .group-buttons .group-two .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-two .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-two .main-btn:hover { background-position: bottom center; } .group-buttons .group-three .main-btn { background: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; line-height: 52px; background: -webkit-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: -o-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: linear-gradient( to right, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background-size: 200% auto; border: 0; } .group-buttons .group-three .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-three .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-three .main-btn:hover { background-position: right center; } .group-buttons .group-four { margin-left: 0; } .group-buttons .group-four .main-btn { background: none; border: 2px solid #3b9fdcff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; padding: 0 12px; } .group-buttons .group-four .main-btn i { font-size: 24px; } .group-buttons .group-four .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-four .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-four .main-btn:hover { background-color: #3b9fdcff; color: #fff; } .group-buttons .group-five .main-btn { background: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; line-height: 52px; background: -webkit-linear-gradient( #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: -o-linear-gradient(#3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100%); background: linear-gradient(#3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100%); background-size: auto 200%; border-top: 0; border-bottom: 0; border-color: rgba(244, 246, 247, 0.2); padding: 0 16px; } .group-buttons .group-five .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-five .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-five .main-btn:hover { background-position: bottom center; } .group-buttons .group-six .main-btn { background: none; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; overflow: hidden; color: #fff; line-height: 52px; background: -webkit-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: -o-linear-gradient( left, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background: linear-gradient( to right, #3b9fdcff 0%, #2bdbdc 50%, #3b9fdcff 100% ); background-size: 200% auto; border: 0; padding: 0 16px; } .group-buttons .group-six .main-btn:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 0; } .group-buttons .group-six .main-btn:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 0; } .group-buttons .group-six .main-btn:hover { background-position: right center; } /*=========================== 06.FORM ELEMENTS css ===========================*/ .form-elements-title { font-size: 36px; font-weight: 600; line-height: 45px; color: #6c6c6c; } @media (max-width: 767px) { .form-elements-title { font-size: 24px; line-height: 35px; } } .form-group { margin-bottom: 0; } .form-input .help-block { margin-top: 2px; } .form-input .help-block .list-unstyled li { font-size: 12px; line-height: 16px; color: #fc3832; } .form-input label { font-size: 12px; line-height: 18px; color: #6c6c6c; margin-bottom: 8px; display: inline-block; font-weight: bold; } .form-input .input-items { position: relative; } .form-input .input-items input, .form-input .input-items textarea { width: 100%; height: 44px; border: 2px solid; padding-left: 44px; padding-right: 12px; position: relative; font-size: 16px; } .form-input .input-items textarea { padding-top: 8px; height: 130px; resize: none; } .form-input .input-items i { position: absolute; top: 11px; left: 13px; font-size: 20px; z-index: 9; } .form-input .input-items.default input, .form-input .input-items.default textarea { border-color: #a4a4a4; color: #6c6c6c; } .form-input .input-items.default input:focus, .form-input .input-items.default textarea:focus { border-color: #3b9fdcff; } .form-input .input-items.default input::placeholder, .form-input .input-items.default textarea::placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.default input::-moz-placeholder, .form-input .input-items.default textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.default input::-moz-placeholder, .form-input .input-items.default textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.default input::-webkit-input-placeholder, .form-input .input-items.default textarea::-webkit-input-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.default i { color: #6c6c6c; } .form-input .input-items.active input, .form-input .input-items.active textarea { border-color: #3b9fdcff; color: #242b57ff; } .form-input .input-items.active input::placeholder, .form-input .input-items.active textarea::placeholder { color: #242b57ff; opacity: 1; } .form-input .input-items.active input::-moz-placeholder, .form-input .input-items.active textarea::-moz-placeholder { color: #242b57ff; opacity: 1; } .form-input .input-items.active input::-moz-placeholder, .form-input .input-items.active textarea::-moz-placeholder { color: #242b57ff; opacity: 1; } .form-input .input-items.active input::-webkit-input-placeholder, .form-input .input-items.active textarea::-webkit-input-placeholder { color: #242b57ff; opacity: 1; } .form-input .input-items.active i { color: #3b9fdcff; } .form-input .input-items.error input, .form-input .input-items.error textarea { border-color: #fc3832; color: #fc3832; } .form-input .input-items.error input::placeholder, .form-input .input-items.error textarea::placeholder { color: #fc3832; opacity: 1; } .form-input .input-items.error input::-moz-placeholder, .form-input .input-items.error textarea::-moz-placeholder { color: #fc3832; opacity: 1; } .form-input .input-items.error input::-moz-placeholder, .form-input .input-items.error textarea::-moz-placeholder { color: #fc3832; opacity: 1; } .form-input .input-items.error input::-webkit-input-placeholder, .form-input .input-items.error textarea::-webkit-input-placeholder { color: #fc3832; opacity: 1; } .form-input .input-items.error i { color: #fc3832; } .form-input .input-items.success input, .form-input .input-items.success textarea { border-color: #4da422; color: #4da422; } .form-input .input-items.success input::placeholder, .form-input .input-items.success textarea::placeholder { color: #4da422; opacity: 1; } .form-input .input-items.success input::-moz-placeholder, .form-input .input-items.success textarea::-moz-placeholder { color: #4da422; opacity: 1; } .form-input .input-items.success input::-moz-placeholder, .form-input .input-items.success textarea::-moz-placeholder { color: #4da422; opacity: 1; } .form-input .input-items.success input::-webkit-input-placeholder, .form-input .input-items.success textarea::-webkit-input-placeholder { color: #4da422; opacity: 1; } .form-input .input-items.success i { color: #4da422; } .form-input .input-items.disabled input, .form-input .input-items.disabled textarea { border-color: #a4a4a4; color: #6c6c6c; background: none; } .form-input .input-items.disabled input::placeholder, .form-input .input-items.disabled textarea::placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.disabled input::-moz-placeholder, .form-input .input-items.disabled textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.disabled input::-moz-placeholder, .form-input .input-items.disabled textarea::-moz-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.disabled input::-webkit-input-placeholder, .form-input .input-items.disabled textarea::-webkit-input-placeholder { color: #6c6c6c; opacity: 1; } .form-input .input-items.disabled i { color: #6c6c6c; } .form-style-two .form-input .input-items input, .form-style-two .form-input .input-items textarea { border-radius: 5px; padding-left: 12px; padding-right: 44px; } .form-style-two .form-input .input-items i { left: auto; right: 13px; } .form-style-three .form-input { text-align: center; } .form-style-three .form-input .input-items input, .form-style-three .form-input .input-items textarea { border-radius: 50px; text-align: center; } .form-style-four .form-input label { padding-left: 44px; margin-bottom: 0; } .form-style-four .form-input .input-items input, .form-style-four .form-input .input-items textarea { border-top: 0; border-left: 0; border-right: 0; } .form-style-five .form-input { position: relative; } .form-style-five .form-input label { position: absolute; top: -10px; left: 10px; background-color: #fff; z-index: 5; padding: 0 5px; } .form-style-five .form-input .input-items input, .form-style-five .form-input .input-items textarea { border-radius: 5px; } /*=========================== 09.NAVBAR css ===========================*/ .navbar-area { position: absolute; top: 0; left: 0; width: 100%; z-index: 99; } .navbar-area .navbar { position: relative; display:flex; justify-content:flex-end; flex-wrap:nowrap; } .navbar-area .navbar .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #242b57; margin: 5px 0; display: block; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-collapse { position: absolute; top: 115%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 0; -webkit-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); -moz-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); } } @media (max-width: 767px) { .navbar-area .navbar .navbar-collapse { position: absolute; top: 115%; left: 0; width: 100%; background-color: #f4f6f7; z-index: 8; padding: 10px 0; -webkit-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); -moz-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); } } .navbar-area .navbar .navbar-nav .nav-item { margin: 0 16px; /*gtj*/ margin: 0; position: relative; } .navbar-area .navbar .navbar-nav .nav-item a { font-size: 16px; line-height: 24px; font-weight: 700; padding: 26px 10px; color: #fff; /*gtj*/ color: #606060ff; /*gtj text-transform: uppercase;*/ position: relative; opacity: 0.8; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; color: #242b57ff; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item a { padding: 10px 0; display: block; color: #242b57ff; } } .navbar-area .navbar .navbar-nav .nav-item a::before { position: absolute; content: ""; width: 32px; height: 4px; /* GTJ background: -webkit-linear-gradient( left, rgba(255, 255, 255, 0.1) 0%, white 100% ); background: -o-linear-gradient(left, rgba(255, 255, 255, 0.1) 0%, white 100%); background: linear-gradient( to right, rgba(255, 255, 255, 0.1) 0%, white 100% ); */ left: 50%; margin: 0 2px; bottom: 14px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform: translate(-50%) scaleX(0); -moz-transform: translate(-50%) scaleX(0); -ms-transform: translate(-50%) scaleX(0); -o-transform: translate(-50%) scaleX(0); transform: translate(-50%) scaleX(0); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-nav .nav-item a::before { display: none; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item a::before { display: none; } } .navbar-area .navbar .navbar-nav .nav-item.active > a, .navbar-area .navbar .navbar-nav .nav-item:hover > a { opacity: 1; color: #606060ff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-nav .nav-item.active > a, .navbar-area .navbar .navbar-nav .nav-item:hover > a { color: #242b57ff; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-nav .nav-item.active > a, .navbar-area .navbar .navbar-nav .nav-item:hover > a { color: #242b57ff; } } .navbar-area .navbar .navbar-nav .nav-item.active > a::before, .navbar-area .navbar .navbar-nav .nav-item:hover > a::before { -webkit-transform: translate(-50%) scaleX(1); -moz-transform: translate(-50%) scaleX(1); -ms-transform: translate(-50%) scaleX(1); -o-transform: translate(-50%) scaleX(1); transform: translate(-50%) scaleX(1); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-area .navbar .navbar-btn { position: absolute; right: 70px; top: 7px; } } @media (max-width: 767px) { .navbar-area .navbar .navbar-btn { position: absolute; right: 60px; top: 7px; } } .navbar-area .navbar .navbar-btn li { display: inline-block; margin-right: 5px; } .navbar-area .navbar .navbar-btn li a { padding: 10px 16px; font-size: 16px; text-transform: uppercase; font-weight: 700; color: #fff; border: 2px solid; border-radius: 4px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-area .navbar .navbar-btn li a.light { border-color: #fff; } .navbar-area .navbar .navbar-btn li a.light:hover { background-color: rgba(255, 255, 255, 0.4); } .navbar-area .navbar .navbar-btn li a.solid { background-color: #fff; border-color: #fff; color: #3b9fdcff; } .navbar-area .navbar .navbar-btn li a.solid:hover { background-color: transparent; color: #fff; } .navbar-area.sticky { z-index: 999; position: fixed; -webkit-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); -moz-box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); } .navbar-area.sticky .navbar .navbar-toggler .toggler-icon { background-color: #242b57ff; } .navbar-area.sticky .navbar .navbar-nav .nav-item a { color: #242b57ff; opacity: 0.7; } .navbar-area.sticky .navbar .navbar-nav .nav-item a::before { background: -webkit-linear-gradient( left, rgba(18, 18, 18, 0) 0%, #242b57ff 100% ); background: -o-linear-gradient(left, rgba(18, 18, 18, 0) 0%, #242b57ff 100%); background: linear-gradient(to right, rgba(18, 18, 18, 0) 0%, #242b57ff 100%); } .navbar-area.sticky .navbar .navbar-nav .nav-item.active, .navbar-area.sticky .navbar .navbar-nav .nav-item:hover { color: #242b57ff; opacity: 1; } .navbar-area.sticky .navbar .navbar-btn li a.light { border-color: #3b9fdcff; color: #3b9fdcff; } .navbar-area.sticky .navbar .navbar-btn li a.solid { border-color: #3b9fdcff; background-color: #3b9fdcff; color: #fff; } /*=========================== 10.SLIDER css ===========================*/ .carousel-item { background-color: #3b9fdcff; /*GTJ*/ background-color: #ffffff; background: #d1e1fd; position: relative; } .carousel-item::before { position: absolute; content: ""; width: 33%; height: 100%; /*GTJ background: -webkit-linear-gradient( rgba(0, 103, 244, 0.3) 0%, rgba(43, 219, 220, 0.3) 100% ); background: -o-linear-gradient( rgba(0, 103, 244, 0.3) 0%, rgba(43, 219, 220, 0.3) 100% ); background: linear-gradient( rgba(0, 103, 244, 0.3) 0%, rgba(43, 219, 220, 0.3) 100% );*/ top: 0; right: 15%; -webkit-transform: skewX(20deg); -moz-transform: skewX(20deg); -ms-transform: skewX(20deg); -o-transform: skewX(20deg); transform: skewX(20deg); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .carousel-item::before { width: 40%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel-item::before { width: 60%; } } @media (max-width: 767px) { .carousel-item::before { width: 50%; right: 45%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .carousel-item::before { right: 25%; } } .carousel-item .slider-image-box { position: absolute; top: 0; right: 0; /*GTJleft: 0;*/ width: 50%; width: 100%; /*GTJleft: 0;*/ height: 100%; z-index: 9; } .carousel-item .slider-image-box .slider-image { max-width: 680px; max-width: 100%; /*GTJleft: 0;*/ width: 100%; } .slider-content { position: relative; z-index: 9; padding-top: 240px; /*GTJ*/ padding-top: 200px; padding-bottom: 200px; /*GTJ*/ padding-bottom: 100px; } @media (max-width: 767px) { .slider-content { padding-top: 150px; padding-bottom: 110px; } .carousel .carousel-control-prev, .carousel .carousel-control-next { top: 120px !important; } .form-input .input-items label { width: 26%; } .navbar-brand img { max-height: 60px !important; } .footer-area .social { float: none !important; margin: auto !important; } } .slider-content .title { font-size: 40px; line-height: 1.5em; color: #fff; /*GTJ*/ color: #242b57ff; font-weight: 700; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-content .title { font-size: 58px; line-height: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-content .title { font-size: 72px; line-height: 90px; } } @media (max-width: 767px) { .slider-content .title { font-size: 34px; line-height: 45px; } } .slider-content .text { color: #fff; /*GTJ*/ color: #242b57ff; font-size: 16px; line-height: 24px; margin-top: 16px; } .slider-content .slider-btn { padding-top: 16px; } .slider-content .slider-btn li { display: inline-block; margin: 16px 8px 0; } @media (max-width: 767px) { .slider-content .slider-btn li { margin: 16px 3px 0; } } .slider-content .slider-btn li a.rounded-one { background-color: #3b9fdcff; border-color: #3b9fdcff; color: #ffffff; } .slider-content .slider-btn li a.rounded-one:hover { background-color: #1a68bcff; /*GTJ*/ color: #1a68bcff; color: #fff; } .slider-content .slider-btn li a.rounded-two { border-color: #fff; } .slider-content .slider-btn li a.rounded-two:hover { background-color: #fff; color: #3b9fdcff; /*GTJ*/ color: #242b57ff; } .carousel-indicators { margin-bottom: 50px; } .carousel-indicators li { display: block; width: 8px; height: 8px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50px; border: 0; margin: 0px 2px; /*GTJ*/ background-color: #242b57; } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel-indicators li { width: 13px; height: 13px; } } @media (max-width: 767px) { .carousel-indicators li { width: 13px; height: 13px; } } .carousel-indicators li.active { background-color: #fff; /*GTJ*/ background-color: #ed2135ff; width: 16px; border-radius: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel-indicators li.active { width: 23px; } } @media (max-width: 767px) { .carousel-indicators li.active { width: 23px; } } .carousel .carousel-control-prev, .carousel .carousel-control-next { top: 50%; font-size: 32px; color: #fff; /*GTJ*/ color: #3b9fdc; bottom: auto; left: 10px; right: auto; opacity: 1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 99; width: 48px; height: 48px; line-height: 48px; text-align: center; border: 1px solid #3b9fdc; border-radius: 5px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .carousel .carousel-control-prev, .carousel .carousel-control-next { left: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel .carousel-control-prev, .carousel .carousel-control-next { /*display: none;*/ } } @media (max-width: 767px) { .carousel .carousel-control-prev, .carousel .carousel-control-next { /*display: none;*/ } } .carousel .carousel-control-next { right: 60px; left: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .carousel .carousel-control-next { right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel .carousel-control-next { right: 10px; } } @media (max-width: 767px) { .carousel .carousel-control-next { right: 30px; } } /*=========================== 17.FEATURES css ===========================*/ /*===== features TWO =====*/ .features-area { background-color: #f4f6f7; padding-top: 120px; padding-bottom: 130px; } .features-area-2 { background-color: #f4f6f7; margin-top: 100px; padding-bottom: 130px; } .features-area-3 { background-color: #f4f6f7; margin-top: 0px; padding-bottom: 130px; } .single-features { padding: 40px 20px 52px; background-color: #fff; } .single-features .features-title-icon .features-title a { font-size: 36px; line-height: 45px; color: #242b57ff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; font-weight: 400; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-features .features-title-icon .features-title a { font-size: 24px; line-height: 35px; } } @media (max-width: 767px) { .single-features .features-title-icon .features-title a { font-size: 24px; line-height: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-features .features-title-icon .features-title a { font-size: 36px; line-height: 45px; } } .single-features .features-title-icon .features-title a:hover { color: #3b9fdcff; } .single-features .features-title-icon .features-icon { position: relative; display: inline-block; } .single-features .features-title-icon .features-icon i { font-size: 88px; line-height: 70px; color: #3b9fdcff; position: relative; z-index: 5; } .single-features .features-title-icon .features-icon .shape { position: absolute; top: 0; left: 0; } .single-features .features-content .text { font-size: 14px; line-height: 20px; color: #242b57ff; margin-top: 16px; } .single-features .features-content .features-btn { color: #3b9fdcff; font-size: 16px; font-weight: 700; margin-top: 29px; } /*=========================== 18.PORTFOLIO css ===========================*/ .portfolio-area { padding-top: 120px; padding-bottom: 130px; } .portfolio-menu ul li { font-size: 16px; font-weight: 700; color: #6c6c6c; line-height: 48px; padding: 0 30px; position: relative; z-index: 5; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; cursor: pointer; width: 100%; border-radius: 50px; overflow: hidden; margin-top: 4px; text-transform: uppercase; } .portfolio-menu ul li:last-child { margin-right: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio-menu ul li { font-size: 14px; padding: 0 26px; } } @media (max-width: 767px) { .portfolio-menu ul li { font-size: 14px; padding: 0 22px; line-height: 42px; } } .portfolio-menu ul li::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(left, #3b9fdcff 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #3b9fdcff 0%, #2bdbdc 100%); background: linear-gradient(to right, #3b9fdcff 0%, #2bdbdc 100%); z-index: -1; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .portfolio-menu ul li:hover, .portfolio-menu ul li.active { color: #fff; } .portfolio-menu ul li:hover::before, .portfolio-menu ul li.active::before { opacity: 1; } .single-portfolio .portfolio-image { position: relative; overflow: hidden; } .single-portfolio .portfolio-image img { width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .single-portfolio .portfolio-image .portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; background-color: rgba(255, 255, 255, 0.8); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); border-radius: 8px; } .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content { padding: 16px; } .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon { position: relative; display: inline-block; margin: 0 20px; } .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon a { font-size: 48px; color: #3b9fdcff; position: relative; z-index: 5; line-height: 50px; } .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon .shape { position: absolute; top: 7px; left: 0; } .single-portfolio:hover .portfolio-overlay { opacity: 1; visibility: visible; } /*=========================== 16.PRICING css ===========================*/ .pricing-area { background-color: #f4f6f7; padding-top: 120px; padding-bottom: 130px; } /*===== PRICING STYLE NINE =====*/ .pricing-style { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); padding: 24px 20px 38px; border-radius: 8px; position: relative; overflow: hidden; background: -webkit-linear-gradient(#2bdbdc 0%, #3b9fdcff 100%); background: -o-linear-gradient(#2bdbdc 0%, #3b9fdcff 100%); background: linear-gradient(#2bdbdc 0%, #3b9fdcff 100%); } .pricing-style .pricing-icon img { width: 190px; } .pricing-style .pricing-header .sub-title { font-size: 20px; font-weight: 600; line-height: 25px; color: #fff; position: relative; margin-top: 24px; } .pricing-style .pricing-header .month { font-size: 20px; font-weight: 300; line-height: 25px; color: #fff; margin-top: 3px; } .pricing-style .pricing-header .month .price { font-size: 36px; font-weight: 600; line-height: 45px; color: #fff; margin-top: 8px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style .pricing-header .month .price { font-size: 24px; margin-top: 32px; line-height: 30px; } } .pricing-style .pricing-list { margin-top: 24px; } .pricing-style .pricing-list ul li { font-size: 16px; line-height: 24px; color: #fff; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-style .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media (max-width: 767px) { .pricing-style .pricing-list ul li { font-size: 14px; margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing-style .pricing-list ul li { font-size: 16px; margin-top: 16px; } } .pricing-style .pricing-list ul li i { color: #fff; margin-right: 8px; } .pricing-style .pricing-btn { margin-top: 31px; } .pricing-style .pricing-btn .main-btn { background-color: #fff; border-color: #fff; } .pricing-style .pricing-btn .main-btn:hover { color: #3b9fdcff; -webkit-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16); } /*=========================== 15.ABOUT css ===========================*/ .about-area { padding-top: 80px; padding-bottom: 130px; position: relative; } .about-area .about-title .sub-title { font-size: 18px; font-weight: 400; color: #3b9fdcff; text-transform: uppercase; } @media (max-width: 767px) { .about-area .about-title .sub-title { font-size: 16px; } } .about-area .about-title .title { font-size: 30px; padding-top: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-area .about-title .title { font-size: 26px; } } @media (max-width: 767px) { .about-area .about-title .title { font-size: 22px; } } .about-area .about-accordion .accordion .card { border: 0; background: none; } .about-area .about-accordion .accordion .card .card-header { padding: 0; border: 0; background: none; margin-top: 40px; } .about-area .about-accordion .accordion .card .card-header a { font-size: 18px; font-weight: 500; color: #000; display: block; position: relative; padding-right: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-area .about-accordion .accordion .card .card-header a { font-size: 16px; } } @media (max-width: 767px) { .about-area .about-accordion .accordion .card .card-header a { font-size: 16px; } } .about-area .about-accordion .accordion .card .card-header a::before { content: "\ea58"; font-family: "LineIcons"; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .about-area .about-accordion .accordion .card .card-header .collapsed::before { content: "\ea5c"; } .about-area .about-accordion .accordion .card .card-body { padding: 20px 20px 0; } .about-area .about-image img { width: 100%; } /*=========================== 26.TESTIMONIAL css ===========================*/ /*===== TESTIMONIAL STYLE THREE =====*/ .testimonial-area { padding-top: 80px; padding-bottom: 130px; background-color: #f4f6f7; } .testimonial-area .testimonial-left-content .sub-title { font-size: 18px; font-weight: 400; color: #3b9fdcff; text-transform: uppercase; } @media (max-width: 767px) { .testimonial-area .testimonial-left-content .sub-title { font-size: 16px; } } .testimonial-area .testimonial-left-content .title { font-size: 32px; padding-top: 10px; color: #242b57ff; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-area .testimonial-left-content .title { font-size: 30px; } } @media (max-width: 767px) { .testimonial-area .testimonial-left-content .title { font-size: 24px; } } .testimonial-area .testimonial-left-content .testimonial-line { padding-top: 10px; } .testimonial-area .testimonial-left-content .testimonial-line li { height: 5px; background-color: #3b9fdcff; opacity: 0.2; display: inline-block; border-radius: 50px; margin-right: 3px; } .testimonial-area .testimonial-left-content .testimonial-line li:nth-of-type(1) { width: 40px; } .testimonial-area .testimonial-left-content .testimonial-line li:nth-of-type(2) { width: 15px; } .testimonial-area .testimonial-left-content .testimonial-line li:nth-of-type(3) { width: 10px; } .testimonial-area .testimonial-left-content .testimonial-line li:nth-of-type(4) { width: 5px; } .testimonial-area .testimonial-left-content .text { padding-top: 15px; } .testimonial-area .testimonial-right-content { position: relative; background-color: #e9ecef; -webkit-box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.07); -moz-box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.07); box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.07); border-radius: 50px; max-width: 500px; padding-top: 50px; } .testimonial-area .testimonial-right-content .quota { position: absolute; top: 10px; left: 15px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); opacity: 0.1; } .testimonial-area .testimonial-right-content .quota i { font-size: 130px; line-height: 95px; color: #3b9fdcff; } .testimonial-area .testimonial-content-wrapper { position: relative; left: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-area .testimonial-content-wrapper { left: 0; } } @media (max-width: 767px) { .testimonial-area .testimonial-content-wrapper { left: 0; } } .single-testimonial { background-color: #fff; padding: 40px 30px 50px; border-radius: 50px; } .single-testimonial .testimonial-text .text { font-size: 24px; font-weight: 400; line-height: 36px; color: #242b57ff; padding-bottom: 25px; } @media (max-width: 767px) { .single-testimonial .testimonial-text .text { font-size: 18px; line-height: 32px; } } .single-testimonial .testimonial-author { border-top: 1px solid #e9ecef; padding-top: 50px; } .single-testimonial .testimonial-author .author-info .author-image img { border-radius: 50%; width: 70px; } .single-testimonial .testimonial-author .author-info .author-name { padding-left: 30px; } .single-testimonial .testimonial-author .author-info .author-name .name { font-size: 16px; font-weight: 700; color: #242b57ff; } .single-testimonial .testimonial-author .author-info .author-name .sub-title { font-size: 14px; color: #a4a4a4; margin-top: 5px; } @media (max-width: 767px) { .single-testimonial .testimonial-author .author-review { padding-left: 100px; padding-top: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-testimonial .testimonial-author .author-review { padding-left: 0; padding-top: 15px; } } .single-testimonial .testimonial-author .author-review .star li { display: inline-block; font-size: 14px; color: #ffb400; } .single-testimonial .testimonial-author .author-review .review { font-size: 14px; color: #000; margin-top: 5px; } .testimonial-active .slick-arrow { position: absolute; bottom: 0; left: -635px; font-size: 22px; cursor: pointer; color: #a4a4a4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-active .slick-arrow { left: -480px; } } .testimonial-active .slick-arrow:hover { color: #000; } .testimonial-active .slick-arrow.next { left: -600px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-active .slick-arrow.next { left: -445px; } } /*=========================== 13.TEAM css ===========================*/ /*===== TEAM STYLE ELEVEN =====*/ .team-style-eleven { position: relative; -webkit-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1); -moz-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1); box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1); } .team-style-eleven .team-image img { width: 100%; } .team-style-eleven .team-content { position: absolute; bottom: 0; left: 0; width: 100%; background-color: #fff; padding-top: 25px; padding-bottom: 25px; z-index: 5; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .team-style-eleven .team-content { padding-top: 15px; padding-bottom: 15px; } } .team-style-eleven .team-content::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: -webkit-linear-gradient(left, #3b9fdcff 0%, #2bdbdc 100%); background: -o-linear-gradient(left, #3b9fdcff 0%, #2bdbdc 100%); background: linear-gradient(to right, #3b9fdcff 0%, #2bdbdc 100%); z-index: -1; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; opacity: 0; } .team-style-eleven .team-content .team-social { position: absolute; top: 0; left: 0; width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; visibility: hidden; opacity: 0; } .team-style-eleven .team-content .team-social .social { background-color: #fff; display: inline-block; padding: 10px 20px 6px; border-radius: 50px; } .team-style-eleven .team-content .team-social .social li { display: inline-block; margin: 0 8px; } .team-style-eleven .team-content .team-social .social li a { font-size: 16px; color: #a4a4a4; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .team-style-eleven .team-content .team-social .social li a:hover { color: #3b9fdcff; } .team-style-eleven .team-content .team-name a { color: #242b57ff; font-size: 24px; font-weight: 600; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .team-style-eleven .team-content .team-name a { font-size: 18px; } } .team-style-eleven .team-content .sub-title { font-size: 16px; color: #3b9fdcff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .team-style-eleven .team-content .sub-title { font-size: 14px; } } .team-style-eleven:hover .team-content { padding-top: 50px; } @media (max-width: 767px) { .team-style-eleven:hover .team-content { padding-top: 35px; } } .team-style-eleven:hover .team-content::before { opacity: 1; } .team-style-eleven:hover .team-content .team-social { top: -20px; visibility: visible; opacity: 1; } .team-style-eleven:hover .team-content .team-name a { color: #fff; } .team-style-eleven:hover .team-content .sub-title { color: #fff; } /*=========================== 19.CONTACT css ===========================*/ .contact-area { padding-top: 10px; padding-bottom: 110px; background-color: #f4f6f7; } p.form-message.success, p.form-message.error { font-size: 16px; color: #333; background: #ddd; padding: 10px 15px; margin-top: 15px; margin-left: 15px; } p.form-message.success.form-message.error, p.form-message.error.form-message.error { color: #f00; } .contact-map iframe { width: 100%; height: 550px; } @media (max-width: 767px) { .contact-map iframe { height: 350px; } } .contact-info .single-contact-info .contact-info-icon i { width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 24px; color: #fff; border-radius: 50%; } .contact-info .single-contact-info .contact-info-content { padding-left: 20px; } .contact-info .single-contact-info .contact-info-content .text { color: #242b57ff; } .contact-info .single-contact-info.contact-color-1 .contact-info-icon i { background-color: #242b57ff; } .contact-info .single-contact-info.contact-color-2 .contact-info-icon i { background-color: #fc3832; } .contact-info .single-contact-info.contact-color-3 .contact-info-icon i { background-color: #005ad5; } .contact-wrapper .contact-title { font-size: 32px; font-weight: 700; color: #000; } @media (max-width: 767px) { .contact-wrapper .contact-title { font-size: 26px; } } .contact-wrapper .contact-title i { color: #242b57ff; margin-right: 8px; } .contact-wrapper .contact-title span { font-weight: 400; } /*=========================== 21.FOOTER css ===========================*/ .footertxtcolor{ color: white; } @media (max-width: 704px) { .footertxtcolor { color: #76777A; } } /*===== FOOTER FIVE =====*/ .footer-area { background-color: #f4f6f7; padding-top: 45px; padding-bottom: 60px; } .footer-area .social li { display: inline-block; margin: 0 5px; /*GTJ*/ border: thin solid white; padding: 2.5px 10px; border-radius: 50%; } .footer-area .social li a { font-size: 24px; color: #6c6c6c; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .footer-area .social li a:hover { color: #3b9fdcff; } .footer-area .footer-support { padding-top: 21px; } .footer-area .footer-support span { font-size: 16px; line-height: 24px; color: #242b57ff; font-weight: 600; margin-top: 9px; display: block; } @media (max-width: 767px) { .footer-area .footer-support span { display: block; } } .footer-area .footer-app-store { padding-top: 27px; } .footer-area .footer-app-store ul li { display: inline-block; margin-right: 8px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-area .footer-app-store ul li { margin-right: 6px; } } .footer-area .footer-app-store ul li:last-child { margin-right: 0; } @media (max-width: 767px) { .footer-area .footer-app-store ul li { width: 120px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer-area .footer-app-store ul li { width: auto; } } .footer-area .copyright .text { color: #242b57ff; } .footer-area.footer-dark { background-color: #242b57ff; } .footer-area.footer-dark .social li a { color: #fff; } .footer-area.footer-dark .footer-support { padding-top: 21px; } .footer-area.footer-dark .footer-support span { color: #fff; } .footer-area.footer-dark .footer-app-store { padding-top: 27px; } .footer-area.footer-dark .footer-app-store ul li { color: #fff; } .footer-area.footer-dark .copyright .text { color: #fff; } /*===== BACK TO TOP =====*/ .back-to-top { font-size: 20px; color: #fff; position: fixed; right: 20px; bottom: 20px; width: 45px; height: 45px; line-height: 45px; border-radius: 5px; background-color: #3b9fdcff; text-align: center; z-index: 99; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; display: none; } .back-to-top:hover { color: #fff; background-color: #3b9fdcff; } /*# sourceMappingURL=style.css.map */ /*GTJ*/ .navbar-brand img { max-height: 70px; } .hidden { display: none !important; } .footer-area .social { float: right; } .slider-icon-txt { } .slider-icon-txt img { height: 14px; } .slider-icon-txt2 img { height: 20px; } .slider-icon-txt3 img { height: 18px; } .slider-content h1 { font-family: "GothamMedium_1"; } .slider-content h2 { font-family: "Gotham-Light"; font-size: 20px; } .slider-content b { font-family: "GothamMedium_1"; font-size: 20px; } .slider-content .social { } .slider-content .social li { display: inline-block; margin: 0; /*GTJ*/ border: thin solid #3b9fdcff; padding: 2.5px 10px; border-radius: 50%; font-size: 19px; } .slider-content .social li a { font-size: 20px; color: #3b9fdcff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .slider-content .social li a:hover { color: #3b9fdcff; } .with-out-border { border: 0px solid transparent !important; } .slider-content .descount { background-color: #ed2135ff; color: white; position: relative; padding: 10px; border-radius: 0 0 50% 50%; display: inline-block; text-align: center; float: right; } .slider-content .txt-1 { font-family: "Rubik-Black"; font-size: 30px; font-weight: lighter; display: block; } .slider-content .txt-2 { font-size: 12px; font-family: "Rubik-Bold"; display: block; } .slider-content .txt-3 { font-size: 12px; font-family: "Rubik-Bold"; display: block; } .navbar-nav { } #contact h1 { font-family: "GothamMedium_1"; } .form-input .label-control { font-weight: bold; font-size: 16px; color: #1a68bc; font-family: "Gotham-Light"; } .without-padding { padding: 0 !important; } .without-margin { padding: 0 !important; } .home-images img { cursor: pointer; } .home-images img:hover { -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; -webkit-filter: grayscale(100%); filter: grayscale(100%); } #services { padding-bottom: 0px; } legend { border-bottom: thin solid #242b57 !important; margin-top: 5px; } .slider-image img { max-width: 1450px; } .footer-support a { color: white; display: inline !important; } .footer-support .separador { margin: auto 5px; margin-top: auto; line-height: 1em !important; display: inline !important; } .submenu { padding: 15px 15px !important; color: #242b57 !important; } .message_success { margin-top: 10px; padding: 5px; font-size: 16px; border: thin solid rgb(31, 77, 31); background-color: #52bf52; color: #fbfbfb; font-weight: bold; } .message_warning { margin-top: 10px; padding: 5px; font-size: 16px; border: thin solid #b05a26; background-color: #e39e61; color: #fbfbfb; font-weight: bold; } .lds-spinner { color: official; display: inline-block; position: relative; width: 80px; height: 80px; } .lds-spinner div { transform-origin: 40px 40px; animation: lds-spinner 1.2s linear infinite; } .lds-spinner div:after { content: " "; display: block; position: absolute; top: 3px; left: 37px; width: 6px; height: 18px; border-radius: 20%; background: #9d2b24; } .lds-spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; } .lds-spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; } .lds-spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; } .lds-spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; } .lds-spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s; } .lds-spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; } .lds-spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s; } .lds-spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; } .lds-spinner div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s; } .lds-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; } .lds-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; } .lds-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; } @keyframes lds-spinner { 0% { opacity: 1; } 100% { opacity: 0; } } .btn-pagar { color: #fff; background-color: transparent !important; border-color: transparent !important; padding: 0; } .btn-pagar img { padding: 0; margin: 0; max-width: 150px; border-radius: 9px; } .footer-area .opcion-pago { margin: auto; position: relative; } .footer-area .opcion-pago li { float: left; display: inline; } #services .opcion-pago-1 { min-width: 150px; display: inherit; } #services .opcion-pago-1 li { margin: 5px; display: inline-block; } #services .opcion-pago-1 img { max-width: 50px; border-radius: 50%; } .opcion-pago-2 { min-width: 150px; display: inherit; vertical-align: middle !important; } .opcion-pago-2 ul { margin: auto; z-index: 9; } .opcion-pago-2 li { margin: 5px; display: inline-block; } .opcion-pago-2 img { max-width: 150px; border-radius: 50%; } .logo2 { background: #242b57; padding: 5px; border-radius: 9px; } .navbar-biblioteca { position: relative; } .navbar-biblioteca .navbar-brand { text-align: center; width: 100%; } .navbar-biblioteca .navbar-brand img { max-width: 100% !important; max-height: 200px; } .container-biblioteca { min-height: 1000px; background: rgb(58, 29, 85); background: linear-gradient( 90deg, rgba(58, 29, 85, 1) 0%, rgba(28, 46, 96, 1) 100% ); padding: 1em; } .container-biblioteca h1{ font-weight: bolder; text-align: center; padding-bottom: 2em; font-family: Arial, sans-serif; } .biblioteca-title-1{ color: #80aaf4; } .biblioteca-title-2{ color: #b06aff; }